import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios'

export default class Search extends Component {
	render() {
		return (
			<section className="jumbotron">
				<h3 className="jumbotron-heading">Search Github Users</h3>
				<div>
					<input type="text" placeholder="enter the name you search" ref={c => this.keyWord = c}/>&nbsp;
					<button onClick={this.search}>Search</button>
				</div>
			</section>
		)
	}
	search = ()=>{
		//获取用户的输入
		const {value} = this.keyWord
		//通知List组件把自己的isFirst变为false，同时还得把List组件中的isLoading改为true
		PubSub.publish('getData',{isFirst:false,isLoading:true})
		//发送请求
		axios.get('https://api.github.com/search/users',{params:{q:value}}).then(
			response => {
				//把List组件中的isLoading改为false，同时还得把List组件中的users改为返回的数据
				PubSub.publish('getData',{isLoading:false,users:response.data.items,isError:false})
			},
			error => {
				//把List组件中的isLoading改为false，同时还得把List组件中的users改为空数组，同时还得把List组件中的isError变为true
				PubSub.publish('getData',{isLoading:false,users:[],isError:true})
			}
		)
 	}
}
